<template>
	<SearchForm :columns="formColumn" @search="search" @reset="search" />
	<!-- <el-header>
		<div class="left-panel">
			<el-button icon="el-icon-download">导出</el-button>
		</div>
	</el-header> -->
	<el-main class="nopadding">
		<scTable
			ref="table"
			tableName="stuAttendanceList"
			v-bind="list"
			row-key="id"
			stripe
      :vritualData="vritualData"
      :setUpType="false"
			:hidePropOrder="true"
		>
			<!-- <el-table-column type="selection" width="50"></el-table-column> -->
      <template #attendceDetail="scope">
        <div class="attend p-flex p-ai-c p-jc-sa">
          <div><span class="poin"></span>出勤{{ scope.row.work }}次</div>
          <div><span class="poin poin1"></span>缺勤{{ scope.row.absence }}次</div>
          <div><span class="poin poin2"></span>未考勤{{ scope.row.noAttendance }}次</div>
        </div>
			</template>
      <el-table-column label="操作" width="120" fixed="right" align="center">
				<template #default="scope">
					<el-button type="primary" plain size="small"
						@click="viewDetail(scope.row)">
            详情
          </el-button>
				</template>
			</el-table-column>
		</scTable>

    <AttendanceDetail ref="AttendanceDetailRef" />
	</el-main>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import { formColumn, column } from "./data";
import AttendanceDetail  from './components/attendanceDetail.vue'

export default {
	components: {
		SearchForm,
    AttendanceDetail
  },
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.student.attendance,
				params: {
					studentId: parseInt(this.$route.params.id)
				},
				column,
			},
      vritualData: [
        {className: "123", studentId: 12, classId: 1}
      ]
		};
	},
	methods: {
    viewDetail(row) {
      this.$refs.AttendanceDetailRef.openDialog(row)
    },
		search(searchParams) {
			let params = {}
			if(searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				params = Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			this.$refs.table.reload(params);
    },
	},
};
</script>

<style scoped lang="scss">
.attend {
  &>div {
    display: flex;
    align-items: center;
  }
  .poin {
    width: 14px;
    height: 14px;
    background-color: #1ada82;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
  }
  .poin1 {
    background-color: #ff4a3f;
  }
  .poin2 {
    background-color: #ffcb3f;
  }
}
</style>

